<template>
  <div class="reg">
    <!-- 图片 -->
    <div class="tu"></div>
    <!-- 返回箭头 -->
    <router-link to="/reg">
      <div class="fan"></div>
    </router-link>
    <!-- 登录 -->
    <div class="deng">
      <p class="span">欢迎注册</p>
      <p class="span1">
        <span>已有账号?</span>
        <router-link to="/reg">
          <span class="dlu">登录</span>
        </router-link>
      </p>
      <p>
        <i class="iconfont icon-01 user"></i>
        <input
          type="text"
          name="username"
          placeholder="请设置6~10位用户名："
          v-model="username"
          @keyup="user"
          @focus="focusfns"
          @blur="blurs"
          maxlength="10"
          autocomplete="off"
        />
        <i class="correct" v-show="correct"></i>
      </p>
      <div class="ti">{{ ti_content }}</div>
      <p>
        <i class="iconfont icon-shouji user1"></i>
        <input
          type="text"
          name="number"
          placeholder="请设置手机号："
          v-model="number"
          @keyup="num"
          @focus="focusfns1"
          maxlength="11"
          autocomplete="off"
        />
        <i class="correct" v-show="correct1"></i>
      </p>
      <div class="ti">{{ ti_content1 }}</div>
      <p>
        <i class="iconfont icon-mimasuo user1"></i>
        <input
          type="text"
          name="password"
          placeholder="请设置6位数字密码："
          v-model="password"
          @keyup="pwd"
          @focus="focusfns2"
          maxlength="6"
          autocomplete="off"
        />
        <i class="correct" v-show="correct2"></i>
      </p>
      <div class="ti">{{ ti_content2 }}</div>
      <p class="ww">
        <i class="iconfont icon-yanzhengma user1"></i>
        <input type="text" name="email" placeholder="请输入验证码：" disabled />
        <button>验证码</button>
      </p>
      <p class="disan">
        <input type="submit" value="注册" class="dl" @click="logon" />
      </p>
      <p class="yue">
        <label>
          <input type="checkbox" v-model="yue" />
          <span>阅读并接受</span>
          <router-link to="">
            <span class="xiao">《小明家具用户协议》</span>
          </router-link>
          <span>及</span>
          <router-link to="">
            <span class="xiao">《小明家具隐私保护声明》</span>
          </router-link>
        </label>
      </p>
    </div>
    <div class="tishi" v-show="xian">
      <span>{{ zhu }}</span>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      username: "", //用户名输入的值
      number: "", //手机输入的值
      password: "", //密码输入的值
      ti_content: "", //用户名提示内容
      ti_content1: "", //手机号ts内容
      ti_content2: "", //密码ts内容
      correct: false, //用户名
      correct1: false, //手机号
      correct2: false, //密码
      yue: false, //阅读并接受
      id: 0, //用户的个数
      xian: false, //显示隐藏
      zhu: "", //注册提示内容
    };
  },
  mounted() {
    this.id = localStorage.getItem("id");
  },
  methods: {
    user(val) {
      if (this.username != "") {
        if (
          /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/.test(this.username)
        ) {
          //全局只能是英文字母、数字、下划线
          this.correct = true;
          this.ti_content = "";
        } else {
          this.ti_content = "用户名仅支持6~10位的数字和字母的组合";
          this.correct = false;
        }
      } else {
        this.ti_content = "";
        this.correct = false;
      }
    },
    num() {
      if (this.number !== "") {
        var reg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
        if (!reg.test(this.number)) {
          this.ti_content1 = "请输入有效的手机号码";
          this.correct1 = false;
        } else {
          this.ti_content1 = "";
          this.correct1 = true;
        }
      } else {
        this.ti_content1 = "";
        this.correct1 = false;
      }
    },
    pwd() {
      if (this.password !== "") {
        var reg = /^\d{6}$/gi;
        if (!reg.test(this.password)) {
          this.ti_content2 = "请输入6位数字";
          this.correct2 = false;
        } else {
          this.ti_content2 = "";
          this.correct2 = true;
        }
      } else {
        this.ti_content2 = "";
        this.correct2 = false;
      }
    },
    // 获取焦点事件
    focusfns() {
      this.ti_content = "";
    },
    focusfns1() {
      this.ti_content1 = "";
    },
    focusfns2() {
      this.ti_content2 = "";
    },
    // 注册判断
    logon() {
      if (!this.yue || !this.username) {
        //提示内容
        // console.log('请输入对应的内容');
        this.username == ""
          ? (this.ti_content = "用户名不能为空")
          : (this.ti_content = "");
        this.number == ""
          ? (this.ti_content1 = "手机号码不能为空")
          : (this.ti_content1 = "");
        this.password == ""
          ? (this.ti_content2 = "密码不能为空")
          : (this.ti_content2 = "");
      } else {
        //成功后
        // console.log(200);
        this.id++;
        localStorage.setItem("id", this.id);
        // 获取数据
        var obj = {
          username: this.username,
          password: this.password,
          id: this.id,
          number: this.number,
        };
        var that = this;
        this.$axios
          .post("http://47.114.130.21:3002/user", obj)
          .then((data) => {
            if (data.data != 404) {
              that.zhu = "注册成功";
              that.xian = true;
              setTimeout(() => {
                this.xian = false;
                this.$router.push({ path: "/reg" });
              }, 500);
              // 注册成功清空数据
              this.username = "";
              this.number = "";
              this.password = "";
              this.yue = "";
              this.correct = false; //用户名
              this.correct1 = false; //手机号
              this.correct2 = false; //密码
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    blurs() {
      // console.log(this.correct);
      if (this.correct) {
        // 获取数据
        var obj = { username: this.username, id: 200 };
        this.$axios
          .post("http://47.114.130.21:3002/user", obj)
          .then((data) => {
            // console.log(data.data);
            if (data.data == 404) {
              this.ti_content = "此用户名太受欢迎,请更换一个";
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.reg {
  background-color: #fff !important;
  background: url("../../public/img/d1.jpg") -37px 0 no-repeat;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: 120%;
  .tu {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(160, 160, 175, 0.4);
  }
  // 返回
  .fan {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(89, 94, 91, 0.4);
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
  }
  .fan::before {
    content: "";
    width: 15px;
    height: 15px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
    position: absolute;
    top: 8px;
    left: 9px;
  }

  //   登录
  .deng {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: -38px;
    transform: translateX(10%);
    width: 101%;
    text-align: center;
    height: 100%;
    form {
      margin-top: 70px;
    }
    .span {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      margin: 76px 51px;
      text-align: initial;
    }
    .span1 {
      font-size: 13px;
      // font-weight: bold;
      color: #fff;
      margin: 0px 50px;
      text-align: initial;
      span {
        margin-right: 5px;
      }
      .dlu {
        color: #eba735;
      }
    }
    p {
      margin-top: 5px;
      position: relative;
      // 图标
      i {
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        color: #fff;
        top: 26px;
        font-size: 23px;
      }
      .user {
        font-weight: bolder;
      }
      .user1 {
        top: 29px;
      }

      input {
        font-size: 14px;
        width: 73%;
        padding: 15px 30px;
        outline: none;
        border: 1px solid transparent;
        background: transparent;
        color: #fff;
        margin-top: 20px;
        border-bottom: 1px solid #fff;
      }
      input:focus::-webkit-input-placeholder {
        color: transparent;
      }
      input::-webkit-input-placeholder {
        color: #fff;
      }
      .dl {
        background-color: #5aadfd;
        color: #fff;
      }
      // 忘记密码
      .liji {
        margin-top: 20px;
        span {
          font-size: 13px;
          color: #fff;
        }
        .s {
          margin: 0 140px 10px 0;
        }
      }

      // 第三方登录
      .di {
        font-size: 13px;
        color: #fff;
      }
      .di::after {
        content: "";
        display: inline-block;
        width: 40px;
        border-top: 1px solid #fff;
        transform: translate(10px, -3px);
      }
      .di::before {
        content: "";
        display: inline-block;
        width: 40px;
        border-top: 1px solid #fff;
        transform: translate(-10px, -3px);
      }
      .qq,
      .wei,
      .xin {
        display: inline-block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 15px 0 0 0;
        transform: scale(0.8);
      }
      // qq
      .qq {
        background: url(/img/jing_xue.5bd8d347.png) -130px -1px no-repeat;
      }
      .wei {
        background: url(/img/jing_xue.5bd8d347.png) -66px -1px no-repeat;
      }
      .xin {
        background: url(/img/jing_xue.5bd8d347.png) -3px -1px no-repeat;
      }
      .correct {
        display: inline-block;
        position: absolute;
        background: #fff;
        background-size: 100%;
        top: 38px;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        right: 53px;
      }
      .correct::after {
        content: "";
        display: inline-block;
        position: absolute;
        right: -2px;
        background: url(/img/check11.png) no-repeat;
        background-size: 100%;
        top: -2px;
        height: 18px;
        width: 18px;
        z-index: 2;
      }
    } //p
    // 提示信息
    .ti {
      color: #ff5555;
      margin: 5px 0 -25px 52px;
      height: 17px;
      width: 275px;
      text-align: start;
    }
    .fle {
      display: flex;
      justify-content: space-around;
    }
    // 注册
    .disan {
      input {
        border: transparent;
        border-radius: 20px;
        height: 40px;
        line-height: 10px;
      }
    }
    .ww {
      width: 58%;
      margin-left: 23px;
      button {
        width: 100px;
        position: absolute;
        top: 36px;
        border-radius: 30px;
        padding: 10px;
        font-size: 13px;
        outline: none;
        border: transparent;
        margin-left: 9px;
        background-color: rgb(212 212 212);
      }
    }
    .yue {
      color: #fff;
      margin: 120px -4px 0 0;
      label {
        input {
          margin: 0 -58px 0 -75px;
        }
        .xiao {
          color: #eba735;
        }
        /* input::checked{
        background-color: red;
      } */
      }
    }
  }
  // 注册提示
  .tishi {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.3);

    span {
      width: 200px;
      height: 100px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      display: inline-block;
      text-align: center;
      line-height: 100px;
      font-size: 18px;
      border-radius: 10px;
      transform: translate(50%, 280%);
    }
  }
} //reg
</style>